<!DOCTYPE HTML> 
<html lang="en-US"> 
<head> 
<meta charset="UTF-8"> 
<title>javascript星级评分</title> 
<style type="text/css"> 
*{margin:0;padding:0;} 
#wrapper{height:20px;padding:5px;width:130px;margin:100px auto 10px;} 
a{float:left;width:23px;height:20px;background:url(img/star.png) 0 -20px no-repeat;} 
p{font:24px SimSun;width:130px;margin-left:auto;margin-right:auto;} 
</style> 
</head> 
<body> 
<div id="wrapper"> 
  <a href="javascript:;"></a> 
  <a href="javascript:;"></a> 
  <a href="javascript:;"></a> 
  <a href="javascript:;"></a> 
  <a href="javascript:;"></a> 
</div> 
<p></p> 
</body> 
</html> 
<script type="text/javascript"> 
window.onload = function(){ 
var oDiv = document.getElementById('wrapper'); 
var star = oDiv.getElementsByTagName('a'); 
var temp = 0; 
for(var i = 0, len = star.length; i < len; i++){ 
star[i].index = i; 
star[i].onmouseover = function(){ 
clear(); 
for(var j = 0; j < this.index + 1; j++){ 
star[j].style.backgroundPosition = '0 0'; 
} 
} 
star[i].onmouseout = function(){ 
for(var j = 0; j < this.index + 1; j++){ 
star[j].style.backgroundPosition = '0 -20px'; 
} 
current(temp); 
} 
star[i].onclick = function(){ 
temp = this.index + 1; 
document.getElementsByTagName('p')[0].innerHTML = temp + ' 颗星'; 
current(temp); 
} 
} 
//清除所有 
function clear(){ 
for(var i = 0, len = star.length; i < len; i++){ 
star[i].style.backgroundPosition = '0 -20px'; 
} 
} 
//显示当前第几颗星 
function current(temp){ 
for(var i = 0; i < temp; i++){ 
star[i].style.backgroundPosition = '0 0'; 
} 
} 
}; 
</script> 